<template>
  <div>
    <div class="head-bg">
      <el-image :src="headBg" fit="cover"></el-image>
    </div>
    <div class="content-container">
      <div class="content py-8">
        <div class="module-container">
          <div class="left">
            <div id="map" class="map"></div>
          </div>
          <div class="right">
            <div class="w-full text-xl  text-bold pb-8">
              <div class=" py-2">
                全国交易额
              </div>
              <div class="text-blue-500 text-2xl">
                ￥ {{ formatNum(transaction) }}
              </div>
            </div>
            <ul class="transaction-list">
              <li v-for="item in transactionList" :key="item.title">
                <span class="title"> {{ item.title }} </span>
                <p class="text-bold">
                  <span> {{ item.value }} </span>
                  <span> {{ item.unit }} </span>
                </p>
              </li>
            </ul>
          </div>
        </div>

        <div class="card-list">
          <div class="card-item">
            <div class="title">
              华东区域
            </div>
            <div class="flex justify-between pt-4">
              <div class="lititle-card bg-blue-400">
                <div class="py-2">
                  <span class="text-bold text-xl "> 12312 </span>
                  <span> 万元 </span>
                </div>
                <div class="">
                  交易额
                </div>
              </div>
              <div class="lititle-card bg-yellow-500">
                <div class="py-2">
                  <span class="text-bold text-xl "> 12312 </span>
                  <span> 家 </span>
                </div>
                <div class="">
                  服务企业
                </div>
              </div>
            </div>
          </div>

          <div class="card-item">
            <div class="title">
              服务平台
            </div>
            <div class="pt-4">
              <div
                v-for="item in servicePlatformList"
                :key="item.id"
                class="sub-title"
              >
                <span>
                  {{ item.address }}
                </span>
                <span class="content">
                  {{ item.title }}
                </span>
              </div>
            </div>
          </div>

          <div class="card-item">
            <div class="title">
              华东区域
            </div>
            <div class="py-2">
              <div class="sub-title">
                这是标题这是标题这是标题这是标题这是标题这是标题这是标题这是标题
              </div>
              <div class="sub-title">
                这是标题这是标题这是标题这是标题这是标题这是标题这是标题这是标题
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="service-module" style="background-color: #fefefe">
        <div class="module-box">
          <div class="title">
            合作模式
          </div>
          <div class="flex py-4 justify-between">
            <div
              class="big-card"
              :style="{
                background: `require('@/assets/images/dynamic-default.png') no-repeat center center`,
                backgroundSize: 'cover',
              }"
            >
              <div class="img-content">
                <div class="text-2xl">
                  "1+1"模式
                </div>
                <div>
                  即主管单位+技转云
                </div>
                <div>
                  围绕平台建设、升级、运营等方面开展合作
                </div>
                <div class="flex justify-between mt-20">
                  <span class="block px-2">
                    平台建设+平台运维
                  </span>
                  <span class="block px-2">
                    平台建设+平台运营
                  </span>
                </div>
              </div>
            </div>

            <div
              class="big-card"
              :style="{
                background: `require('@/assets/images/dynamic-default.png') no-repeat center center`,
                backgroundSize: 'cover',
              }"
            >
              <div class="img-content">
                <div class="text-2xl">
                  "1+1"模式
                </div>
                <div>
                  即主管单位+技转云，
                </div>
                <div>
                  围绕平台建设、升级、运营等方面开展合作
                </div>

                <div class="flex justify-between mt-20">
                  <span class="block px-2">
                    合作开发平台
                  </span>
                  <span class="block px-2">
                    合作运营平台
                  </span>
                  <span class="block px-2">
                    市场化业务合作
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="service-module" style="background-color: #fefefe">
        <div class="module-box">
          <div class="title">
            领导关怀
          </div>
          <div class="grid grid-cols-3 gap-4">
            <div
              v-for="item in careList"
              :key="item.title"
              class="sm-bg-card"
              :style="{
                background: `url(${item.picture}) no-repeat center center`,
                backgroundSize: 'cover',
              }"
            >
              <div
                class="w-full h-full flex flex-col items-center  justify-center   text-xl bg-blue-400 bg-opacity-50 font-mono cursor-pointer"
              >
                <div class="z-index-10 text-2xl text-white">
                  {{ item.title }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="service-module" style="background-color: #fefefe">
        <div class="module-box">
          <div class="title">
            服务动态
          </div>
          <div class="grid grid-rows-2 grid-flow-col py-4">
            <div
              v-for="(item, index) in serviceList"
              :key="item.id"
              :class="[index === 0 ? 'row-span-2' : '']"
            >
              <div class="p-2 pb-20 cursor-pointer" v-show="index === 0">
                <div @click="toSerDetail(item)">
                  <el-image
                    :src="item.mainImg"
                    style="width: 100%"
                    fit="cotain"
                  >
                  </el-image>
                  <div class="truncate font-bold leading-8 text-xl">
                    {{ item.title }}
                  </div>
                  <div class="text-gray-400 py-2">
                    {{ item.releaseTime }}
                  </div>
                  <div
                    v-html="item.dynamicInfo"
                    class="text-gray-400 pb-2 border-b-2 overflow-clip overflow-hidden"
                  >
                    <!-- {{ item.dynamicInfo }} -->
                  </div>
                </div>

                <div class="text-right p-4 text-blue-700">
                  <router-link :to="{}">
                    查看更多
                    <i class="el-icon-arrow-right"></i>
                  </router-link>
                </div>
              </div>

              <div
                v-show="index !== 0"
                :class="[
                  'flex flex-col justify-between h-full  p-4 border-l-2 cursor-pointer',
                  index % 2 !== 0 ? 'border-b-2' : '',
                ]"
                @click="toSerDetail(item)"
              >
                <div>
                  <div class="truncate font-bold  text-xl py-2">
                    {{ item.title }}
                  </div>
                  <div
                    style="width: 350px;height: 144px;"
                    v-html="item.dynamicInfo"
                    class="text-gray-400 overflow-clip overflow-hidden"
                  >
                    <!-- {{ item.dynamicInfo }} -->
                  </div>
                </div>

                <div class="text-gray-400">{{ item.time }}</div>
              </div>
            </div>
          </div>
          <div>
            <div
              class="w-32 h-12 leading-10 m-auto text-lg text-center tracking-wider font-bold text-blue-400 rounded-full border-2 border-blue-400 cursor-pointer"
            >
              <router-link :to="{ path: '/serviceDynamic/servicelist/1' }">
                点击更多
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import chinaJson from '@/assets/js/echartsChina.js'
import { getDynamicSerList } from '@/api/dynamicService.js'
export default {
  data() {
    return {
      headBg: require('@/assets/page-head/governmentService.png'),

      provinceData: [
        {
          name: '上海',
          value: 205,
        },
        {
          name: '北京',
          value: 212,
        },
        {
          name: '天津',
          value: 234,
        },
        {
          name: '重庆',
          value: 221,
        },
        {
          name: '河北',
          value: 135,
        },
        {
          name: '山东',
          value: 125,
        },
        {
          name: '陕西',
          value: 124,
        },
        {
          name: '山西',
          value: 432,
        },
        {
          name: '辽宁',
          value: 321,
        },
        {
          name: '吉林',
          value: 332,
        },
        {
          name: '黑龙江',
          value: 232,
        },
        {
          name: '宁夏',
          value: 192,
        },
        {
          name: '江苏',
          value: 183,
        },
        {
          name: '河南',
          value: 163,
        },
        {
          name: '安徽',
          value: 293,
        },
        {
          name: '浙江',
          value: 203,
        },
        {
          name: '湖南',
          value: 254,
        },
        {
          name: '湖北',
          value: 185,
        },
        {
          name: '甘肃',
          value: 105,
        },
        {
          name: '青海',
          value: 95,
        },
        {
          name: '西藏',
          value: 84,
        },
        {
          name: '新疆',
          value: 23,
        },
        {
          name: '内蒙古',
          value: 25,
        },
        {
          name: '贵州',
          value: 35,
        },
        {
          name: '四川',
          value: 28,
        },
        {
          name: '江西',
          value: 435,
          selected: true,
        },
        {
          name: '福建',
          value: 187,
        },
        {
          name: '广东',
          value: 16,
        },
        {
          name: '广西',
          value: 19,
        },
        {
          name: '云南',
          value: 25,
        },
        {
          name: '海南',
          value: 21,
        },
        {
          name: '香港',
          value: 9,
        },
        {
          name: '澳门',
          value: 15,
        },
        {
          name: '台湾',
          value: 12,
        },
      ],
      transaction: 55234242,
      transactionList: [
        { title: '正在运营区域市场', value: 40, unit: '个' },
        { title: '举办创新活动', value: 500, unit: '场' },
        { title: '落地技术项目', value: 12055, unit: '个' },
        { title: '培育企业', value: 848, unit: '家' },
      ],
      // 服务平台
      servicePlatformList: [
        {
          id: 0,
          title: '新余市渝科技',
          address: '江西-南昌',
        },
        { id: 1, title: '新平台科技云平台科技', address: '江西-南昌' },
        { id: 2, title: '新余市科技云平台科技', address: '江西-南昌' },
        { id: 3, title: '新余市渝水区科云平台科技', address: '江西-南昌' },
      ],
      // 领导关怀
      careList: [
        {
          picture: require('@/assets/images/dynamic-default.png'),
          title: '关怀11',
        },
        {
          picture: require('@/assets/images/dynamic-default.png'),
          title: '关怀22',
        },
        {
          picture: require('@/assets/images/dynamic-default.png'),
          title: '关怀333',
        },
      ],
      tableTotal: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        typeId: 24,
        provinceId: undefined,
        levelId: undefined,
        yearId: undefined,
      },
      serviceList: [],
      // 服务列表
      TempserviceList: [
        {
          id: -1,
          mainImg: require('@/assets/images/dynamic-default.png'),
          title: '敬请期待',
          releaseTime: '2021-12-03',
          dynamicInfo:
            '<p> 这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内...</p>',
          typeId: 1,
        },
        {
          id: -2,
          mainImg: require('@/assets/images/dynamic-default.png'),
          title: '敬请期待',
          releaseTime: '2021-12-03',
          dynamicInfo:
            '<p> 这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内...</p>',
          typeId: 1,
        },
        {
          id: -3,
          mainImg: require('@/assets/images/dynamic-default.png'),
          title: '敬请期待',
          releaseTime: '2021-12-03',
          dynamicInfo:
            '<p> 这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内...</p>',
          typeId: 1,
        },
        {
          id: -4,
          mainImg: require('@/assets/images/dynamic-default.png'),
          title: '敬请期待',
          releaseTime: '2021-12-03',
          dynamicInfo:
            '<p> 这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内...</p>',
          typeId: 1,
        },
        {
          id: -5,
          mainImg: require('@/assets/images/dynamic-default.png'),
          title: '敬请期待',
          releaseTime: '2021-12-03',
          dynamicInfo:
            '<p> 这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内...</p>',
          typeId: 1,
        },
      ],
    }
  },
  computed: {
    yearDataInfo() {
      return [255, 223, 212, 292]
    },
    formatNum() {
      return (num, counts = 3, mark = ',') => {
        num = num.toString().split('.')
        var tempAry = num[0].split('').reverse()
        var res = []
        for (var i = 0, len = tempAry.length; i < len; i++) {
          if (i % counts === 0 && i !== 0) {
            res.push(mark)
          }
          res.push(tempAry[i])
        }
        res.reverse()
        if (num[1]) {
          res = res.join('').concat('.' + num[1])
        } else {
          res = res.join('')
        }

        return res
      }
    },
  },
  created() {
    this.geList()
  },
  mounted() {
    this.initEchartsMap(0)
  },
  methods: {
    geList() {
      getDynamicSerList(this.queryParams).then((res) => {
        if (res.code === 200) {
          let tempList = [...res.rows, ...this.TempserviceList].splice(0, 5)
          this.serviceList = tempList
          this.tableTotal = res.total
        }
      })
    },

    // 初始化地图
    initEchartsMap() {
      this.$echarts.registerMap('china', chinaJson)
      var chart = this.$echarts.init(document.getElementById('map'))

      chart.setOption({
        animation: false,
        title: {
          // text: '中国轮廓地图',
          top: '4%',
          left: 'center',
          textStyle: {
            fontSize: 20,
            fontWeight: 600,
            color: '#fff',
          },
        },
        tooltip: {
          // 触发类型, 数据项图形触发
          trigger: 'item',
          backgroundColor: '#fff',
          textStyle: {
            color: '#000',
          },
          formatter: function(val) {
            return (
              val.data.name +
              '<div class="bjMap">' +
              '<p>' +
              val.data.value +
              '</p>' +
              '</div>'
            )
          },
        },
        series: [
          {
            type: 'map',
            map: 'china',
            roam: false, //是否开启鼠标缩放和平移漫游
            geoIndex: 0, // 不可缺少，否则无tooltip 指示效果
            label: {
              normal: {
                show: true, //显示省份标签
                textStyle: {
                  color: '#000',
                  fontWeight: 'bold',
                  fontSize: '12px',
                }, //省份标签字体颜色
              },
              emphasis: {
                //对应的鼠标悬浮效果
                show: true,
                textStyle: { color: '#fff' },
              },
            },
            itemStyle: {
              normal: {
                borderWidth: 1, //区域边框宽度
                borderColor: '#fff', //区域边框颜色
                areaColor: 'rgb(169, 151, 131)', //区域颜色
              },

              emphasis: {
                borderWidth: 1, //鼠标滑过区域，区域边框宽度
                borderColor: '#fff', //鼠标滑过区域，区域边框颜色
                areaColor: 'rgb(93, 47,145)', //鼠标滑过区域背景色
              },
            },
            data: this.provinceData,
          },
        ],
      })
    },

    toSerDetail(item) {
      let id = item.id
      if (id < 0) {
        return
      }
      let typeId = item.typeId
      this.$router.push({
        path: `/serviceDynamic/servicelist/${typeId}/serviceDetail/${id}`,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.content-container {
  & > .content {
    width: 1200px;
    margin: auto;
    overflow: hidden;
  }
}

.module-container {
  display: flex;
  height: 100%;
  align-items: stretch;
  .left {
    .map {
      width: 884px;
      height: 687px;
    }
  }
  .right {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    width: 224px;
    height: 639px;
    padding: 30px 0;

    .info {
      width: 657px;
      height: 550px;
    }
  }
}

.transaction-list {
  @apply w-full text-left;

  li {
    @apply flex justify-between p-2 border-b items-center;
    .title {
      @apply px-4 flex-grow text-gray-500;
    }
  }
  li::before {
    content: '';
    display: block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: blue;
    font-size: 30px;
  }
}

.card-list {
  @apply flex justify-between py-8 px-2;

  .card-item {
    width: 390px;
    height: 252px;
    box-shadow: 0px 0px 16px 0px rgba(200, 212, 228, 0.55);
    padding: 1.5rem 1rem;
    .title {
      color: #333333;
      font-weight: bold;
      font-size: 18px;
    }
    .lititle-card {
      display: flex;
      flex-flow: column nowrap;
      justify-content: center;
      align-items: center;
      width: 150px;
      height: 104px;
      border-radius: 10px;
      color: #ffffff;
    }

    .sub-title {
      width: 100%;
      @apply flex justify-between py-2 border-b text-gray-500 cursor-pointer hover:bg-gray-50;

      .content {
        @apply text-black font-bold;
      }
    }
  }
}
.service-module {
  padding: 20px;

  .module-box {
    min-width: 1200px;
    width: 1200px;
    margin: auto;
    & > .title {
      font-size: 30px;
      font-family: Source Han Sans CN, Source Han Sans CN-Bold;
      font-weight: 700;
      text-align: left;
      color: #333333;
      padding: 30px 0;
    }

    .big-card {
      position: relative;
      width: 588px;
      height: 338px;

      .img-content {
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        font-size: 16px;

        color: #ffffff;
        background-color: rgba(0, 0, 0, 0.7);
      }
    }

    .sm-bg-card {
      position: relative;
      width: 390px;
      height: 253px;
      .el-image {
        @apply absolute left-0 top-0 w-full h-full;
      }
    }
  }
}
</style>
